<template>
	<view class="display">
		<view class="display-title" @click="oneIdClick">
			<!-- 薅羊毛 -->
			<image src="http://qiniu.suboshimuying.cn/static/home/Frame111.png" v-if="cate===3"></image>
			<!-- 本地服务 -->
			<image src="http://qiniu.suboshimuying.cn/static/home/Frame222.png" style="height: 88rpx;" v-if="cate===2">
			</image>
			<!-- 镇店之宝 -->
			<image src="http://qiniu.suboshimuying.cn/static/home/Frame333.png" v-if="cate===4"></image>
		</view>

		<scroll-view scroll-x="true" class="display-tabs">
			<text v-for="item in tabsList" :key="item.id" :class="{'textActive':twoCate===item.id}"
				@click="twoCate=item.id">{{item.name}}</text>
		</scroll-view>
		<view class="display-goods">
			<view class="goodItem" v-for="item in dataList" :key="item.id"
				@click="toUrl(`/subPages/goodDetails/goodDetails?type=${cate}&id=${item.id}`)">
				<image :src="item.thum_image" mode=""></image>
				<view class="payment">
					{{item.pay_num}}+付款
				</view>
				<view class="price">
					¥{{item.price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "displayBox",
		props: {
			cate: Number,
			area: Number,
		},
		data() {
			return {
				tabsList: [], //分类列表
				dataList: [], //商品列表
				twoCate: null
			}
		},
		watch: {
			area: {
				// immediate: true,
				handler(newValue, oldValue) {
					// console.log(newValue);
					if (newValue !== 0) {
						this.getcateshop()
					}
				}
			},
			twoCate: {
				handler(newValue, oldValue) {
					// console.log(newValue, oldValue);
					this.getcateshop()
				},
				immediate: false,
			}
		},
		beforeDestroy() {
			uni.$off('displayBoxEmit')
		},
		mounted() {
			this.getcategory()
			uni.$on('displayBoxEmit', () => {
				this.getcategory()
			})
			// console.log('displayBox:mounted');
			// setTimeout(() => {
			// 	console.log(this.cate, this.area);
			// }, 1500)
		},
		methods: {
			// 跳转
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			// 获取分类
			async getcategory() {
				let res = await this.$api.getcategory({
					cate: this.cate
				})
				this.tabsList = res?.data
				this.twoCate = res?.data[0].id
				// console.log(res);
			},
			// 获取商品
			async getcateshop() {
				// console.log(this.area);
				if (this.cate === 4) {
					// 镇店之宝
					let res = await this.$api.getcateshop({
						cate: this.cate, // 一级分类ID
						// area: this.area, //城市ID
						two_cate: this.twoCate, //二级分类ID
						total: 8, //条数
					})
					this.dataList = res.data?.data
				} else {
					// 薅羊毛和本地
					let res = await this.$api.getcateshop({
						cate: this.cate, // 一级分类ID
						area: this.area, //城市ID
						two_cate: this.twoCate, //二级分类ID
						total: 8, //条数
					})
					this.dataList = res.data?.data
				}
			},
			// 专区点击(一级分类)
			oneIdClick() {
				getApp().globalData.activeId = this.cate
				uni.switchTab({
					url: '/pages/classify/classify'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.display {
		margin-top: 24rpx;
		width: 100%;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		border-radius: 24rpx;
		background-color: #fff5fc;
		background-image: linear-gradient(0deg, #fde6ff 0%, #fdfdfd 100%);


		&-title {
			width: 100%;
			height: 72rpx;

			image {
				width: 100%;
				height: 72rpx;
			}
		}

		&-tabs {
			white-space: nowrap;
			width: 100%;
			margin: 20rpx 0;
			// padding: 0 12rpx;
			box-sizing: border-box;
			// display: flex;
			// justify-content: space-around;
			// align-items: center;

			text {
				display: inline-block;
				box-sizing: border-box;
				margin: 0 12rpx;
				padding: 7rpx 35rpx;
				border-radius: 35rpx;
				opacity: 1;
				background: rgba(244, 225, 255, 0.8);
				color: $textColor;
				font-size: 25rpx;
				font-weight: 400;
			}

			.textActive {
				color: #fff;
				background-color: $boxBg;
			}
		}

		&-goods {
			box-sizing: border-box;
			padding: 0 10rpx;
			display: grid;
			grid-gap: 15rpx;
			grid-template-columns: repeat(2, 1fr);

			.goodItem {
				// width: 158rpx;
				// height: 300rpx;
				display: inline-block;

				// flex: 1;
				background-color: #fff;
				border-radius: 24rpx;
				// margin: 0 12rpx;
				text-align: center;

				image {
					width: 270rpx;
					height: 270rpx;
					border-radius: 8rpx;
					margin: 0 auto;
					vertical-align: top;
				}

				.payment {
					margin: auto;
					width: 95%;
					height: 45rpx;
					line-height: 45rpx;
					border-radius: 6rpx;
					opacity: 1;
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					font-weight: 500;
					text-align: center;
					background-image: url('http://qiniu.suboshimuying.cn/static/wecom-temp2.png');
					background-size: 100% 100%;
				}

				.price {
					color: $priceText;
					height: 36rpx;
					font-size: 30rpx;
					font-weight: 500;
					font-family: "PingFang SC";
					text-align: center;
					line-height: 36rpx;
					letter-spacing: 0.6rpx;
				}
			}
		}

	}
</style>